<template>
  <div>
    <!--    <el-form :model="formData" :rules="formRules" ref="dynamicForm" label-width="auto">
          <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label" :prop="field.prop">
            <el-input v-if="field.type === 'input'" v-model="formData[field.prop]" :placeholder="field.placeholder"></el-input>
            <el-select v-if="field.type === 'select'" v-model="formData[field.prop]" :placeholder="field.placeholder">
              <el-option v-for="(option, optionIndex) in field.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
            </el-select>
            &lt;!&ndash; 其他类型的表单字段 &ndash;&gt;
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>-->
    <formRender :config="config" :init="data" @submitForm="submitForm"></formRender>
  </div>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue';
import FormRender from './formRender.jsx';

const data = {
  'username': '1231231',
  'account': 10,
};
const config = {
  'title': '表单标题',
  'formItems': [
    [
      {
        'colspan': 12,
        'options': [],
        'label': '姓名',
        'type': 'input',
        'key': 'username',
        'placeholder': '请输入姓名',
        'inputType': 'text'
      },
      {
        'colspan': 12,
        'options': [],
        'label': '账号',
        'type': 'number',
        'key': 'account',
        'placeholder': '请输入年龄',
        'inputType': 'number'
      }
    ],
    [
      {
        'colspan': 12,
        'options': [
          {
            'label': '男',
            'value': '1'
          },
          {
            'label': '女',
            'value': '2'
          }
        ],
        'label': '性别',
        'type': 'select',
        'key': 'sadf'
      },
      {
        'colspan': 12,
        'options': [
          {
            'label': '西瓜',
            'value': '1'
          },
          {
            'label': '橡胶',
            'value': '2'
          },
          {
            'label': '巴啦啦',
            'value': '3'
          }
        ],
        'label': '喜欢的',
        'type': 'radio',
        'key': 'ddd'
      }
    ]
  ]
}

const formData = reactive({
  name: '',
  age: '',
  gender: '',
  address: '',
  // 其他字段
});

const formFields = [
  {
    label: '用户名',
    prop: 'username',
    type: 'input',
    placeholder: '请输入用户名',
  },
  {
    label: '角色',
    prop: 'role',
    type: 'select',
    placeholder: '请选择角色',
    options: [
      {label: '管理员', value: 'admin'},
      {label: '普通用户', value: 'user'},
    ],
  },
];

const form = ref();
const submitForm = () => {
  form.value
}

const formRules = reactive({})
</script>

<style lang="scss" scoped>

</style>
